<script lang="ts" setup>
import apply from '@/api/apply'

const props = defineProps({
  inputAlign: {
    type: String,
    default: 'left',
  },
})

const emits = defineEmits(['validated'])

const model = defineModel({ type: String })
const second = ref<number>(3)
const interval = ref<any>(null)
watch(() => model.value, async (value) => {
  second.value = 3
  if (interval.value) {
    clearInterval(interval.value)
  }
  interval.value = setInterval(async () => {
    second.value--
    if (second.value === 0) {
      clearInterval(interval.value)
      getName(value)
    }
  }, 1000)
})

function inputBlur () {
  if (interval.value) {
    clearInterval(interval.value)
  }
  getName(model.value)
}

async function getName (value: string) {
  if (value.length > 0) {
    const { data } = await apply.getManagerName(value)
    if (data.status === 'success') {
      emits('validated', data.data)
    }
  } else {
    emits('validated', null)
  }
}
</script>

<template>
  <nut-input v-model="model" class="nut-input-text" placeholder="请输入客户经理工号" type="number" @blur="inputBlur"
    :input-align="props.inputAlign" placeholder-style="color:#ccc;" max-length="6" />
</template>
